<template>
    <pop :modelHide="false" zindex="102" name="opacity" :visible.sync="popVisible">
      <div class="pay-model">
          <div class="pay-model-body">
              <div class="model-title">
                  选择支付方式
              </div>
              <img class="model-close" @click="popVisible = false" src="~@/assets/imgs/common/close_icon2.png">
              <ul class="pay-items">
                  <li @click="payType('ali')">
                      <img src="~@/assets/imgs/common/ali.png">
                      <div class="pay-right">
                          <span>支付宝支付</span>
                          <img src="~@/assets/imgs/common/right_arrow_icon.png">
                      </div>
                  </li>
                  <li @click="payType('wx')">
                      <img src="~@/assets/imgs/common/wechat.png">
                      <div class="pay-right px1bt">
                          <span>微信支付</span>
                          <img src="~@/assets/imgs/common/right_arrow_icon.png">
                      </div>
                  </li>
              </ul>
          </div>
      </div>
    </pop>
</template>

<script>
import pop from "@/components/pop.vue";
export default {
    props:{
        visible:{
            type:Boolean,
            default:false
        },
    },
    data() {
        return {
            popVisible:false,
        }
    },
    components:{
        pop
    },
    methods: {
        payType(type){
           this.$emit('payType',type); 
        }
    },
    watch: {
        visible(val){
            if(this.popVisible != val){
                this.popVisible = val;
            }
        },
        popVisible(val){
            this.$emit('update:visible',val);
        },
        
    },
}
</script>

<style lang="less" scoped>
    .pay-model{
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .pay-model-body{
            background: #fff;
            width: 5.9rem;
            padding: .2rem 0;
            border-radius: .2rem;
            position: relative;
            .model-title{
                font-size: .28rem;
                color: #333333;
                line-height: .36rem;
                text-align: center;
                padding: .1rem 0 .4rem;
            }
            .model-close{
                position: absolute;
                top: .34rem;
                right: .4rem;
                width: .28rem;
                height: .28rem;
            }
            .pay-items{
                li{
                    display: flex;
                    align-items: center;
                    
                    &>img{
                        width: .4rem;
                        height: .4rem;
                        margin: 0 .2rem 0 .3rem;
                    }
                    .pay-right{
                        flex: 1;
                        display: flex;
                        align-items: center;
                        height: 1.2rem;
                        justify-content: space-between;
                        padding-right: .2rem;
                        font-weight:400;
                        span{
                            line-height: .4rem;
                            font-size: .28rem;
                            color: #333333;
                        }
                        &>img{
                            width: .16rem;
                            height: .28rem;
                        }
                    }
                }
            }
        }
    }
</style>